<link rel="stylesheet" href="${request.contextPath}/css/suredy-tree.css">
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12 col-ms-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<input type="hidden" value="" id="menuId" />
					<i class="icon-sitemap"></i>
					菜单管理 （
					<i class="bg-danger select-node-info" id="selected-info">请选择菜单项</i>
					）
				</div>
				<div class="panel-body">
					<div class="row">												
						<div class="col-md-12 col-sm-12">
							<div class="btn btn-info" id="create">
								<i class="icon-plus"></i> 新建
							</div>					
							<div class="btn btn-info hidden" id="edit">
								<i class="icon-edit "></i> 修改
							</div>
							<div class="btn btn-danger hidden" id="remove">
								<i class="icon-remove"></i> 删除
							</div>				  
						</div>
					</div>
					<div class="row">&nbsp;</div>			
					<div class="row">					
						<div class="list-group col-md-12 col-sm-12">
							<div class="suredy-tree normal menu-tree" style="margin-left: 15px; border-top: 1px solid #ddd; max-height:600px; overflow:auto;"  >加载中......</div>
						</div>						
					</div>
				</div>

				<div class="panel-footer"></div>
			</div>
		</div>
	</div>
</div>

<script src="${request.contextPath}/js/suredy-tree.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var loadTree = function() {
			$('.menu-tree').tree('menu/tree', {
				click : function() {
					var nodeData = $.suredy.tree.data($(this));
				
					$('#selected-info').html($(this).text());
					if (nodeData.id){
						$('#menuId').val(nodeData.id);
						$('#edit').removeClass('hidden');
						$('#remove').removeClass('hidden');
					} else {
						$('#menuId').val('');
						$('#edit').addClass('hidden');
						$('#remove').addClass('hidden');
					} 
	
				}
			});	
		};
		loadTree();	
		
		$('#create').on('click', function() {		
			$.suredy.showModal({
				size : 'lg',
				icon : 'icon-plus',
				title : '创建菜单项',
				showFoot : false,
				uri : 'menu/create.do'
			});
		
		});

		// edit menu btn click
		$('#edit').on('click', function() {	
			var menuId = $('#menuId').val();
			if (menuId == '') {
				alert('请选择需要修改的菜单节点！');
				return;
			}
			$.suredy.showModal({
				size : 'lg',
				icon : 'icon-edit',
				title : '修改菜单项',
				showFoot : false,
				uri : 'menu/edit.do?menuId=' + menuId
			});
		
		});
	
		// remove btn click
		$('#remove').on('click', function() {
			// get selected node
			var menuId = $('#menuId').val();
	
			if (menuId == '') {
				alert('请选择需要删除的菜单节点！');
				return;
			}
	
	
			var msg = '是否确认删除【选中的节点】？\n\n\
						提示：\n\
						该操作将会删除菜单下的所有子节点！\n\
						请谨慎操作！';
	
			if (!window.confirm(msg))
				return;
	
			$.ajax({
				url : 'menu/delete.do',
				type : 'POST',
				data : {
					menuId : menuId
				},
				success : function(msg) {
					if (!msg) {
						alert('Unknown exception!');
					} else if (!msg.success) {
						alert("删除菜单节点失败！\n\n" + msg.msg);
					} else {
						alert("删除菜单节点成功！");
	
						$('#selected-info').html('请选择菜单节点');
	
						loadTree();
	
						$('.delete-menu').addClass('hidden');
					}
				},
				error : function(a, b, c) {
					alert('Server error! ' + b);
				}
			});
		});		
			
			
	});

</script>	
